<template>


  <div class="smain">

<div class="comegoto">
  <svg t="1745315787006" @click="goBack" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9072" width="20" height="20"><path d="M695.9 958.1c-12.4 0-24.7-4.7-34.2-14.2L325.9 608.1c-53.5-53.5-53.5-140.5 0-193.9L661.8 78.4c18.9-18.9 49.5-18.9 68.3 0 18.9 18.9 18.9 49.5 0 68.3L394.2 482.5c-15.8 15.8-15.8 41.5 0 57.3L730 875.6c18.9 18.9 18.9 49.5 0 68.3-9.3 9.5-21.7 14.2-34.1 14.2z" p-id="9073"></path></svg>
</div>

    <div class="container-signin">

      <div class="container-signin-left"></div>
      <div class="container-signin-right">
        <h1>Recover your <span>password</span></h1>

        <div class="fomrsignp">
        <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="rules"
          label-width="auto"
        >

        <el-form-item prop="email">
          <el-input
            v-model="ruleForm.email"
            placeholder="Please enter Email Address"
            />
        </el-form-item>

        <el-form-item prop="Code">
              <el-input
              oninput="value=value.replace(/[^\d.]/g,'')"
              maxlength="4"
              v-model="ruleForm.code"
               placeholder="Please enter Verification code"
              style="width: calc( 97% - 160px); margin-right: 3%;"
              />
              <el-button style="width: 160px;" :disabled="sendEmailDisabled" @click="getEmailCode(ruleFormRef)">{{ sendEmailMessage }}</el-button>
            </el-form-item>


        <el-form-item prop="password">
          <el-input
            v-model="ruleForm.password"
            placeholder="Please enter Password"
            type="password"
            />
        </el-form-item>


            <div class="center-button">
              <el-form-item  style="margin-bottom: 0;">
                <el-button type="primary" @click="submitForm(ruleFormRef)">RECOVER</el-button>
              </el-form-item>
              </div>

        </el-form>

        
        <H2>
          <router-link to="/Signin">Sign in</router-link>
        </H2>
        </div>

      </div>
    </div>
  </div>


</template>

<script lang="ts" setup>
import { ref } from 'vue'
</script>

<script lang="ts">

import { reactive } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import createAxios from '../utils/axios'
import { ElLoading, ElNotification, type LoadingOptions } from 'element-plus'
import { useUserInfo } from '../stores/userInfo'

interface RuleForm {
  email: string
  password: string
  code:string
}


const userInfo = useUserInfo()
const ruleFormRef = ref<FormInstance>()
const sendEmailDisabled = ref(false);
const sendEmailMessage = ref('Get verification code');
const ruleForm = reactive<RuleForm>({
  email:'',
  code:'',
  password:'',
  sendEmailDisabled:false,
})



const rules = reactive<FormRules<RuleForm>>({
  email: [
    { required: true, message: 'Please enter email address', trigger: 'blur' },
    { type:"email", message: 'Please input correct email address', trigger: 'blur' },
  ],
  code: [
    { required: true, message: 'Please enter email verification code', trigger: 'blur' },
    { min:4, max:4, message: 'Verification Code must be a number', trigger: 'blur' }
  ],
  password: [
    { required: true, message: 'Please enter password', trigger: 'blur' },
    { min:6, message: 'Password must be greater than 6 characters', trigger: 'blur' },
  ]
})

// 获取邮件验证码
const getEmailCode = async (formEl: FormInstance | undefined) =>{
  const email = ruleForm.email
  if(!email){
    ElNotification({
        type: 'error',
        message:'Please input correct email address',
        zIndex: 9999,
    })
    return
  }


  // 不可用
  if (sendEmailDisabled.value){
    return;
  }
  sendEmailDisabled.value = true
  sendEmailMessage.value = 'Try again in 2 minutes'
  setTimeout(function(){
    sendEmailDisabled.value = false
    sendEmailMessage.value = 'Get verification code'
  },2*60*1000)

  // 发送验证码
  createAxios({
        url: '/frontend/account/send-email',
         data: {email:email,is_reg:0},
        method: 'post',
    },{showSuccessMessage: true,})
    .then((res) => {
        // 设置缓存
        console.log('token', res.data)
    })
    .finally(() => {
    })
}

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid) => {
    if (valid) {

      // 请求接口
      createAxios({
            url: '/frontend/account/forget',
            data: ruleForm,
            method: 'post',
        })
        .then((res) => {
            console.log('忘记密码请求结果', res.data.token)
            window.location.href = '/Signin';
        })
        .finally(() => {
        })
    }
  })
}

export default {
  data() {
    return {
      pageTitle: 'Sign up',
      form: {
      }
      };
  },
  created() {
    this.updateTitle();
  },
  methods: {
    goBack() {
      this.$router.back(); // 使用Vue Router的back方法
    },
    updateTitle() {
      document.title = this.pageTitle; // 或者根据需要动态设置标题
    }
  }

}


</script>

<style>
  .comegoto {
  position: fixed;
  top: 50px;
  left: 50px;
  cursor: pointer;
}

  :root {
   --el-component-size:46px !important;;
  }


.smain {
    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: center;
    height: 100vh;
    .el-button {
      height: 46px !important;;
      line-height: 46px !important;;
    }
    .el-form-item {
      padding-bottom: 2px;
      padding-top: 10px;
    }
    .el-button {
      height: 46px;
      line-height: 46px;
    }
    .el-button:hover {
      border: 1px solid #e62424;
      background-color: #ffefef;
      color: #e62424;
    }
  }

.container-signin {
  display: flex;
  justify-content: space-between;
  max-width: 1520px;
  min-width: 1000px;
  background-color: #ffffff;
  -webkit-box-shadow: 0 0 20px 5px rgba(0, 0, 0, .08);
  box-shadow: 0 0 20px 5px rgba(0, 0, 0, .08);
  border-radius: 10px;
  padding: 10px;
  .fomrsignp {
    padding: 40px 50px 0 50px;
    p {
      text-align: center;

      font-weight: 600;
      a {
        color: #e62424;
      }
    }
    .center-button {
      padding: 20px 0 0 0;
      width: 100%;
      .el-button {
        border: 0;
        width: 100% !important;
        font-weight: 600;
        background:#e62424;
      }
    }
  }

  .container-signin-left {
    background-image: url(/public/images/signin.jpg);
    background-size: cover;
    width: 500px;
    height: 550px;
    border-radius: 10px;
  }
  .container-signin-right{
    width: 500px;
    padding: 20px 30px;
     h2 {
      font-weight: 500;
      font-size: 14px;
      margin-top: 20px;
      text-align: center;
      a {
         color: #666;
      }
    }
    h1 {
      text-align: center;
      font-size: 16px;
      padding-top: 40px;
      span {
        color: #e62424;
      }
    }
    h3 {
      font-weight: 500;
      text-align: center;
      font-size: 14px;
      line-height: 26px;
      padding: 20px 30px;
      color: #666;
    }

  }
}
@media only screen and (max-width: 1000px) {

  .comegoto {
  position: fixed;
  top: 4%;
  left: 5%;
}
  .smain {
    align-items:baseline;
  }
  .container-signin {
    width: 100%;
    max-width: 100%;
    min-width: 100%;
    display: inline-block;
    padding: 5%;
    border-radius: 0;
    margin: 0 auto;
    box-shadow:0 0 0 0 rgba(0, 0, 0, .0) !important;
  }
  .container-signin-left {
    display: none;
  }
  .container-signin-right {
    width: 100% !important;
    padding: 0 !important;
    .fomrsignp {
      padding: 30px 30px 0 30px !important;
    }
    h2 {
      border-top: 0;
      margin-top:0;
    }
    h1 {
      padding-top: 120px !important;
    }
    h3 {
      padding: 20px 10px !important;
    }
    .fomrsign {
      padding: 0 30px ;
    }
  }

}
</style>
